<template>
  <svg class="flow-canvas" :width="width" :height="height" :stroke="stroke.color" :strokeWidth="stroke.width">
  </svg>
</template>

<script>
  export default {
    props: {
      width: {
        type: Number,
        default: '600'
      },
      height: {
        type: Number,
        default: '600'
      },
      bg: {
        default: 'none'
      },
      stroke: {
        type: Object,
        default: function () {
          return {
            color: '#787878',
            width: 1
          }
        }
      },
      data: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      drawRect (title, desc, index, svg) {
        let vm = this
        // let sx = 100 * 2 * p
        // let sy = 0
        // let ex = 100
        // let ey = 60
        let wth = 100
        let hgt = 60
        let svgItm = vm.Snap(wth, hgt)
        // let grown = svgItm.paper.g()
        // let svgrect =
        svgItm.paper.rect(0, 0, wth, hgt).attr({
          fill: 'none',
          stroke: '#cacaca'
        })
        // let svgtitle =
        svgItm.paper.text(20, 25, title).attr({
          color: '#787878',
          fontSize: 14
        })
        let svgdesc =
        svgItm.paper.text(6, 40, desc).attr({
          color: '#f00',
          fontSize: 10,
          opacity: 0
        })
        svgItm.hover(function () {
          console.info('hover...')
          svgdesc.animate({
            opacity: 1
          }, 200)
        }, function () {
          svgdesc.animate({
            opacity: 0
          }, 200)
        })
        return svgItm
      }
    },
    mounted () {
      let vm = this
      let svg = vm.Snap('.flow-canvas')
      // let svgGrown = svg.paper.g()
      console.info(svg)
      vm.data.forEach((item, index) => {
        let svgChild = vm.drawRect(item.title, item.desc, index, svg)
        let sx = 200 * index
        svgChild.attr({
          x: sx
        })
        svg.append(svgChild)
        console.info(200 * index + 100)
        svg.paper.line(200 * index + 100, 30, 200 * index + 200, 30)
        svg.paper.line(200 * index + 200 - 10, 30 - 10, 200 * index + 200, 30)
        svg.paper.line(200 * index + 200 - 10, 30 + 10, 200 * index + 200, 30)
      })
    }
  }
</script>
<style>
  text{
    text-anchor: middle;
  }
</style>
